<template>
	<view>
		<view class="list padding-tb-xs">
			<uni-swipe-action>
				<uni-swipe-action-item :right-options="options" :index="index" v-for="(i, index) in vcard" :key="i.id" @click="onClick(i.id, $event)">
					<view class="card" :class="{ pro: false }" @click="$goto(`/pages/cards/detail?id=${i.id}&type=send`)">
						<image :src="i.picture" mode="aspectFill"></image>
						<view class="info">
							<view class="text-xl text-bold text-black text-cut">{{i.name}}</view>
							<view class="text-cut">{{i.position}}</view>
							<view class="text-cut">{{i.company}}</view>
						</view>
					</view>
				</uni-swipe-action-item>
			</uni-swipe-action>

			<view class="card add" @click="$goto('/pages/cards/edit')">
				<view class="flex-row align-center">
					<u-icon name="plus-circle" color="#999999" size="40"></u-icon>
					<text class="margin-left-xs">制作新名片</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				vcard: [],
				options: [{
					text: '编辑',
					style: {
						backgroundColor: '#1e25bb'
					}
				}, {
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}]
			};
		},
		onShow() {
			this.getList()
		},
		methods: {
			getList() {
				this.$u.get('/myvcard/list').then(res => {
					let vcard = res.data.result.vcard
					this.vcard = vcard
				})
			},
			onClick(id, { content }) {
				if (content.text == '编辑') {
					this.$goto('/pages/cards/edit?id=' + id)
				} else if (content.text == '删除') {
					this.delCard(id)
				}
			},
			delCard(id) {
				this.$u.post('/myvcard/delete', {
					id: id
				}).then(res => {
					this.getList()
					this.$msg(res.data.msg, 1000, true)
				})
			}
		}
	}
</script>

<style lang="scss">
	.card {
		width: 723rpx;
		height: 163rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 8rpx auto;
		box-sizing: border-box;
		padding: 13rpx 14rpx;
		display: flex;
		justify-content: space-between;
		box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.1);
		overflow: hidden;
		position: relative;

		&.pro::after {
			content: '企业版';
			position: absolute;
			right: 30rpx;
			top: 30rpx;
			transform: translate(50%, -50%) rotate(45deg);
			width: 160rpx;
			height: 30rpx;
			background: #f5c791;
			color: #714e25;
			font-size: 18rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		&.add {
			background: rgba(255, 255, 255, 0.1);
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 30rpx;
			color: #999999;
		}

		image {
			width: 201rpx;
			height: 137rpx;
			object-fit: cover;
			border-radius: 4rpx;
		}

		.info {
			width: 470rpx;
			color: #7F8289;
			font-size: 24rpx;

			view {
				margin: 8rpx auto
			}
		}
	}
</style>
